Типы и интерфейсы в TypeScript: расширение и пересечение

Типы и интерфейсы. Часть 2

В прошлом посте мы познакомились со способами определить структуру объекта и с помощью типов и с помощью интерфейсов — форма записи разная, но результат идентичный.

Теперь давайте разберемся с расширением. Цель этого урока — получить в результате описание объекта с тремя полями: first, second и third.

Давайте возьмем уже знакомые нам тип AType и интерфейс AInt и на их основе создадим новые.

Интерфейсы расширяются с помощью ключевого слова extends:

typescript

interface BInt extends AInt {
  third: string;
}

С типами такую запись мы использовать не можем. Поэтому нам на помощь приходит инструмент «пересечение», который обозначается символом «&». В результате мы получаем запись, которая с помощью выглядит иначе, но так же решает нашу задачу.

typescript
type BType = AType & {
  third: string;
}

На этом можно было бы и закончить. Но не возник ли у вас вопрос, а можем ли мы применить ключевое слово extends к типу или & к интерфейсу? Давайте попробуем!

typescript

interface BInt extends AType {
  third: string;
}

Внезапно! Эта запись работает! Получается, что интерфейсам в целом без разницы что расширять. Они одинаково хорошо расширят как и другой интерфейс, так и тип.

Что же с инструментом пересечения?

typescript
type BType = AInt & {
  third: string;
}

Да, он тоже прекрасно работает как с интерфейсами, так и типами.

Более того, оказывается, мы можем использовать в качестве базы еще одну сущность — класс.

Для примера создадим класс с двумя полями: first и second.

typescript
class AClass {
  public first: boolean;
  public second: number;

typescript
  constructor(x: boolean, y: number) {
    this.first = x;
    this.second = y;
  }
}

А теперь на его основе мы можем реализовать целевые тип и интерфейс:

typescript

interface BInt extends AClass {
  third: string;
}

typescript
type BType = AClass & {
  third: string;
}

Трудно поверить, но все эти инструменты и варианты записи дают нам идентичный результат.

Расскажите, что больше всего вас удивило?

© Записки тимлида